<template>
    <div class="navbar" :class="isCollapse ? 'Collapse' : ''">
        <dl>
            <dd @mouseenter="item.hover = true" @mouseleave="item.hover = false" v-for="(item, index) in navlist"
                :key="index">
                <template v-if="isCollapse">
                    <div @click.stop="item.callback(index, item)">
                        <div>
                            <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
                            <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

                            <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{ $t(item.lang)
                                }}</span>
                        </div>
                        <!-- :class="item.open || item.hover ? 'active' : ''" -->
                        <el-icon size="12" v-if="isCollapse && item.children.length > 0"
                            :class="item.open ? 'rotate' : ''" color="#98a7b5">
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <ul class="iscollpse" :style="{ height: item.open ? item.children.length * 40 + 'px' : '0px' }">
                        <li @click.stop="items.callback(item.lang + index)" @mouseenter="items.hover = true"
                            @mouseleave="items.hover = false" v-for="(items, index) in item.children"
                            :key="item.lang + index">
                            <NuxtImg v-if="activechildren == item.lang + index || items.hover"
                                :src="`/img/${items.imghover}`" alt="" />
                            <NuxtImg v-else :src="`/img/${items.img}`" alt="" />
                            <span :class="activechildren == item.lang + index || items.hover ? 'active' : ''
        ">{{ $t(items.lang) }}</span>
                        </li>
                    </ul>

                </template>
                <template v-else>

                    <el-tooltip v-if="item.children.length == 0" class="box-item" effect="dark" :content="$t(item.lang)"
                        placement="right-start">
                        <div @click.stop="item.callback(index, item)">
                            <div>
                                <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
                                <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

                                <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{
        $t(item.lang) }}</span>
                            </div>
                            <!-- :class="item.open || item.hover ? 'active' : ''" -->
                            <el-icon size="12" v-if="isCollapse && item.children.length > 0"
                                :class="item.open ? 'rotate' : ''" color="#98a7b5">
                                <ArrowDown />
                            </el-icon>
                        </div>

                    </el-tooltip>
                    <template v-else>
                        <div @click.stop="item.callback(index, item)">
                            <div>
                                <NuxtImg v-if="item.open || item.hover" :src="`/img/${item.imghover}`" alt="" />
                                <NuxtImg v-else :src="`/img/${item.img}`" alt="" />

                                <span v-if="isCollapse" :class="item.open || item.hover ? 'active' : ''">{{
        $t(item.lang) }}</span>
                            </div>
                            <!-- :class="item.open || item.hover ? 'active' : ''" -->
                            <el-icon size="12" v-if="isCollapse && item.children.length > 0"
                                :class="item.open ? 'rotate' : ''" color="#98a7b5">
                                <ArrowDown />
                            </el-icon>
                        </div>
                        <ul class="nocollpse" :class="item.hover ? 'ishover' : ''"
                            :style="{ height: item.hover ? item.children.length * 40 + 'px' : '0px' }">
                            <li @click.stop="items.callback(item.lang + index)" @mouseenter="items.hover = true"
                                @mouseleave="items.hover = false" v-for="(items, index) in item.children"
                                :key="item.lang + index">
                                <NuxtImg v-if="activechildren == item.lang + index || items.hover"
                                    :src="`/img/${items.imghover}`" alt="" />
                                <NuxtImg v-else :src="`/img/${items.img}`" alt="" />
                                <span :class="activechildren == item.lang + index || items.hover ? 'active' : ''
        ">{{ $t(items.lang) }}</span>
                            </li>
                        </ul>
                    </template>
                </template>

            </dd>
            <dd style="flex:1"></dd>
        </dl>

    </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { reactive, watch ,shallowRef} from "vue"


const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
//打开转盘
let emit = defineEmits(["openturn", "openTerouro", "openTask", "openlogin", 'openRanking']);
// 是否展开导航栏
// 本地存储方案一
// let isCollapse = useIsCollapse()
// 本地存储方案二
const store = useStore()
let istoken = computed(() => store.token)
let isCollapse = computed(() => store.IsCollapse)
//导航栏点击
let activechildren = shallowRef<string>("");
let activefathen = shallowRef<number>(99);
let navClick = (index: number): void => {
    activefathen.value = index
    navlist = navlist.map((i, id) => {
        if (id != index) {
            i.open = false;
            i.hover = false
        }
        return i;
    });
    navlist[index]["open"] = !navlist[index]["open"];
    navlist[index]["hover"] = !navlist[index]["hover"];
};
watch(() => isCollapse.value, (newval) => {
    if (!newval) {
        navlist = navlist.map((i, id) => {
            if (id != activefathen.value) {
                i.open = false;
                i.hover = false
            }
            return i;
        });
    }
})
let navlist = reactive([
    {
        lang: "language.nav.nav1",
        img: "nav1.gif",
        imghover: "nav1.gif",
        name: "",
        open: false,
        hover: false,
        callback: (index: number, item: any): void => {

            emit("openturn", true);
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        children: [],
    },
    {
        lang: "language.nav.nav2",
        img: "nav2.png",
        imghover: "nav2.png",
        name: "",
        hover: false,
        open: false,
        children: [],
        callback: async (index: number, item: any) => {
            if (istoken.value == "") {
                store.loginopen = true
                console.log(store.loginopen, 'kkk');
                return
            }
            emit("openTerouro", true);
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
    },
    {
        lang: "language.nav.nav3",
        img: "nav3.png",
        imghover: "nav3l.png",
        name: "",
        hover: false,
        open: false,
        callback: (index: number, item: any): void => {
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        children: [
            {
                lang: "language.nav.nav3children1",
                img: "nav3-1.png",
                imghover: "nav3-1l.png",
                hover: false,
                name: "",
                callback: (index: string) => {
                    activechildren.value = index;
                    console.log(activechildren.value);

                },
            },
            {
                lang: "language.nav.nav3children2",
                img: "nav3-2.png",
                imghover: "nav3-2l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children3",
                img: "nav3-3.png",
                imghover: "nav3-3l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children4",
                img: "nav3-4.png",
                imghover: "nav3-4l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children5",
                img: "nav3-5.png",
                imghover: "nav3-5l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children6",
                img: "nav3-6.png",
                imghover: "nav3-6l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children7",
                img: "nav3-7.png",
                imghover: "nav3-7l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children8",
                img: "nav3-8.png",
                imghover: "nav3-8l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children9",
                img: "nav3-9.png",
                imghover: "nav3-9l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children10",
                img: "nav3-10.png",
                imghover: "nav3-10l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav3children11",
                img: "nav3-11.png",
                imghover: "nav3-11l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
        ],
    },
    {
        lang: "language.nav.nav4",
        img: "nav4.png",
        imghover: "nav4l.png",
        open: false,
        hover: false,
        name: "",
        callback: (index: number, item: any): void => {
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        children: [
            {
                lang: "language.nav.nav4children1",
                img: "nav4-1.png",
                imghover: "nav4-1l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav4children2",
                img: "nav4-2.png",
                imghover: "nav4-2l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav4children3",
                img: "nav4-3.png",
                imghover: "nav4-3l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav4children4",
                img: "nav4-4.png",
                imghover: "nav4-4l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav4children5",
                img: "nav4-5.png",
                imghover: "nav4-5l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    activechildren.value = index;
                },
            },
        ],
    },
    {
        lang: "language.nav.nav5",
        img: "nav5.png",
        imghover: "nav5l.png",
        open: false,
        hover: false,
        name: "",
        callback: (index: number, item: any): void => {

            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        children: [
            {
                lang: "language.nav.nav5children1",
                img: "nav5-1.png",
                imghover: "nav5-1l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    $openPage('/activity')
                    activechildren.value = index;
                },
            },
            {
                lang: "language.nav.nav5children2",
                img: "nav5-2.png",
                imghover: "nav5-2l.png",
                name: "",
                hover: false,
                callback: (index: string) => {
                    emit('openRanking', true)
                    console.log(323223);

                    activechildren.value = index;
                },
            },
        ],
    },
    {
        lang: "language.nav.nav6",
        img: "nav6.png",
        imghover: "nav6l.png",
        hover: false,
        callback: (index: number, item: any): void => {
            $openPage('/business')
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }

        },
        open: false,
        name: "",
        children: [],
    },
    {
        lang: "language.nav.nav7",
        imghover: "nav7l.png",
        img: "nav7.png",
        hover: false,
        callback: (index: number, item: any): void => {
            emit("openTask", true);
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }

        },
        open: false,
        name: "",
        children: [],
    },
    {
        lang: "language.nav.nav8",
        imghover: "nav8l.png",
        img: "nav8.png",
        hover: false,
        callback: (index: number, item: any): void => {
            console.log('/user/vip');
            $openPage('/user/vip')
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        open: false,
        name: "",
        children: [],
    },
    {
        lang: "language.nav.nav9",
        imghover: "nav9l.png",
        img: "nav9.png",
        hover: false,
        callback: (index: number, item: any): void => {
            $openPage('/user/share')
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        open: false,
        name: "",
        children: [],
    },
    {
        lang: "language.nav.nav10",
        imghover: "nav10l.png",
        img: "nav10.png",
        hover: false,
        callback: (index: number, item: any): void => {
            $openPage('/download')
            if (isCollapse.value) {
                navClick(index);
                console.log(item);
            }
        },
        open: false,
        name: "",
        children: [],
    },
]);

</script>
<style scoped lang='scss'>
.navbar {
    min-width: 64px;
    opacity: 0;
    height: calc(100vh - 60px);
    visibility: hidden;
    background-color: #1a1a1a;

    &::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }



    dl {
        width: 218px;
        min-width: 64px;
        min-height: calc(100vh - 60px);
        width: 64px;
        overflow: visible;
        transition: all 0.2s linear;
        @include flex(column, flex-start, center);

        dd {
            min-height: 40px;
            width: 100%;
            margin-top: 5px;
            background-color: #fff;
            @include flex(column, flex-start, center);
            background-color: rgb(32, 34, 38);
            position: relative;
            overflow: visible;

            .el-icon {
                transition: all 0.3s;
            }

            .rotate {
                transform: rotate(180deg);
            }

            .iscollpse {

                width: 100%;
                background-color: rgb(32, 34, 38);
                transition: all 0.2s ease-in-out;
                height: 0;
                overflow: hidden;




                li {
                    padding-left: 40px;

                    &:hover {
                        background-color: rgb(26, 27, 30);

                        span {
                            color: #fff;
                        }
                    }

                    height: 40px;
                    @include flex(row, flex-start, center);
                    cursor: pointer;


                    img {
                        width: 20px;
                        margin-right: 10px;
                    }

                    .active {
                        color: #fff;
                    }

                    span {
                        font-size: 14px;
                        color: #98a7b5;
                    }
                }
            }



            .nocollpse {
                width: 218px;
                opacity: 0;
                position: absolute;
                top: 0px;
                transform: scale(0);
                left: 70px;
                background-color: rgb(32, 34, 38);
                transition: all 0.3s linear;
                z-index: 10;
                overflow: hidden;
                transform-origin: left top;


                li {
                    padding-left: 40px;

                    &:hover {
                        background-color: rgb(26, 27, 30);

                        span {
                            color: #fff;
                        }
                    }

                    height: 40px;
                    @include flex(row, flex-start, center);
                    cursor: pointer;


                    img {
                        width: 20px;
                        margin-right: 10px;
                    }

                    .active {
                        color: #fff;
                    }

                    span {
                        font-size: 14px;
                        color: #98a7b5;
                    }
                }
            }

            .iscollpse {
                width: 100%;
                background-color: rgb(32, 34, 38);
                transition: all 0.2s ease-in-out;
                height: 0;
                overflow: hidden;




                li {
                    padding-left: 40px;

                    &:hover {
                        background-color: rgb(26, 27, 30);

                        span {
                            color: #fff;
                        }
                    }

                    height: 40px;
                    @include flex(row, flex-start, center);
                    cursor: pointer;


                    img {
                        width: 20px;
                        margin-right: 10px;
                    }

                    .active {
                        color: #fff;
                    }

                    span {
                        font-size: 14px;
                        color: #98a7b5;
                    }
                }
            }

            .ishover {
                width: 218px;
                opacity: 1;
                transform: scale(1);
            }

            >div {
                height: 40px;
                @include flex(row, flex-start, center);
                width: 100%;
                padding: 0 20px;

                &:hover {
                    cursor: pointer;
                    background-color: rgb(26, 27, 30);

                    span {
                        color: #fff;

                    }
                }

                >div {
                    @include flex(row, flex-start, center);
                    width: 100%;
                    height: 100%;

                    img {
                        width: 20px;
                        margin-right: 10px;
                    }

                    .active {
                        color: #fff;
                    }

                    span {
                        font-size: 14px;
                        color: #98a7b5;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

}

.Collapse {
    overflow: auto;

    >dl {
        overflow: hidden;
        width: 218px;

        dd {
            overflow: hidden;
        }
    }


}
</style>